<template>
	<view class="page">
		<image class="head-img" :src="head_img" mode=""></image>
		<view class="title-wrapper">
			<text class="name">{{name}}</text>
			<text class="price">￥{{price}}</text>
			<text class="info" v-html="plan_desc">营养师精心调配，助您养成健康饮食习惯</text>
		</view>
		<view class="detail-wrapper">
			<text class="name">计划详情</text>
			<text class="info" v-html="plan_detail">
			</text>
		</view>
		<text class="buy-btn" @click="buy">立即购买</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				name: '',
				plan_desc: '',
				plan_detail: '',
				price: 0,
				head_img: ''
			};
		},
		onLoad(o) {
			console.log(o);
			this.id = o.id
		},
		mounted() {
			this.getData()
		},
		methods:{
			getData: function(){
				this.$api.cycleInfo({id: this.id})
					.then(res => {
						console.log(res);
						this.name = res.data.name;
						this.plan_desc = res.data.plan_desc
						this.plan_detail = res.data.plan_detail
						this.price = res.data.price
						this.head_img = res.data.detail_cover
					})
					.catch(err => {
						if (err.msg)
							this.$db._ShowToast(err.msg)
					})
			},
			buy: function(){
				this.$db._NavTo('submit-order-page', {id: this.id})
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		padding-bottom: 100rpx;
		overflow: hidden;
		background: #FAFAFA;
	}

	.head-img {
		width: 100%;
		height: 514rpx;
	}

	.title-wrapper,
	.detail-wrapper {
		padding: 30rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		background: white;

		.name {
			margin-top: 26rpx;
			font-size: 32rpx;
			line-height: 24rpx;
			color: rgba(51, 51, 51, 1);
		}

		.info {
			margin-top: 18rpx;
			margin-bottom: 44rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			color: rgba(77, 77, 77, 1);
		}
	}
	
	.title-wrapper {
		margin-bottom: 10rpx;
		
		.price{
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #E2000E;
		}
		
		.info{
			margin-top: 0rpx;
		}
	}
	
	.buy-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 28rpx;
		color: #F7F7F7;
		background: #AE9F73;
	}
</style>
